<div class="card">
  <div class="card-body border-bottom">
    <form (ngSubmit)="search()">
      <div class="d-flex align-items-center flex-wrap">
        <div class="me-3 mb-2 d-flex align-items-center">
          <label for="adNumberSearch" class="form-label mb-0 me-2 text-nowrap">用户:</label>
          <input type="text" id="adNumberSearch" class="form-control" style="width: 150px;" [(ngModel)]="adNumberKeyword" name="adNumberKeyword">
        </div>
        <div class="me-3 mb-2 d-flex align-items-center">
          <label for="nameSearch" class="form-label mb-0 me-2 text-nowrap">联系人:</label>
          <input type="text" id="nameSearch" class="form-control" style="width: 150px;" [(ngModel)]="nameKeyword" name="nameKeyword">
        </div>
        <div class="me-3 mb-2 d-flex align-items-center">
          <label for="adTypeSearch" class="form-label mb-0 me-2 text-nowrap">详细地址类型:</label>
          <input type="text" id="adTypeSearch" class="form-control" style="width: 150px;" [(ngModel)]="adTypeKeyword" name="adTypeKeyword">
        </div>
        <div class="ms-md-auto mb-2">
          <button class="btn btn-primary" type="submit"><i class="fa fa-search"></i><span>查询</span></button>
          <button class="btn btn-secondary ms-2" type="button" (click)="resetSearch()">重置</button>
        </div>
      </div>
    </form>
  </div>
  <div class="card-header">
    <div class="row">
      <div class="col col-md-6">
        <h5 class="card-title">客户地址</h5>
      </div>
      <div class="text-end col col-md-6">
        <div class="text-lg-end pt-1">
          <button id="create" class="btn btn-primary" type="button" (click)="openCreateModal()">
            <i class="fa fa-plus me-1"></i>
            <span>录入</span>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-striped table-hover">
        <thead>
          <tr>
            <th>用户</th>
            <th>联系人</th>
            <th>联系电话</th>
            <th>详细地址</th>
            <th>省份</th>
            <th>城市</th>
            <th>区县</th>
            <th>默认地址</th>
            <th>是否可用</th>
            <th>地址类型</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let adManagementItem of adManagement.items">
            <td>{{ adManagementItem.adManagementUser }}</td>
            <td>{{ adManagementItem.adManagementPerson }}</td>
            <td>{{ adManagementItem.adManagementPhone }}</td>
            <td>{{ adManagementItem.detailedAddress }}</td>
            <td>{{ adManagementItem.province }}</td>
            <td>{{ adManagementItem.adManagementCity }}</td>
            <td>{{ adManagementItem.adManagementDistrict }}</td>
            <td>{{ adManagementItem.defaultAddress }}</td>
            <td>{{ adManagementItem.available }}</td>
            <td>{{ adManagementItem.detailedAddressType }}</td>
            <td>
              <button class="btn btn-sm btn-primary me-1" type="button" (click)="openEditModal(adManagementItem.id)">
                <i class="fa fa-edit"></i>
                编辑
              </button>
              <button class="btn btn-sm btn-danger" type="button" (click)="deleteADManagement(adManagementItem.id)">
                <i class="fa fa-trash"></i>
                删除
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="card-footer">
    <div class="row">
      <div class="col-md-6">
        <div class="pagination-info" *ngIf="adManagement.items.length > 0">
          当前显示 {{ adManagement.totalCount > 0 ? ((list.page - 1) * currentPageSize) + 1 : 0 }} - {{ Math.min(list.page * currentPageSize, adManagement.totalCount) }} 条，总计 {{ adManagement.totalCount }} 条
        </div>
      </div>
      <div class="col-md-6">
        <div class="d-flex justify-content-end align-items-center">
          <div class="me-3">
            <label class="me-2">每页显示：</label>
            <select class="form-select form-select-sm d-inline-block" style="width: auto;"
                    [(ngModel)]="currentPageSize"
                    (change)="onPageSizeChange(currentPageSize)">
              <option *ngFor="let size of pageSizeOptions" [value]="size">{{ size }}</option>
            </select>
          </div>
          <nav aria-label="分页导航" *ngIf="adManagement.items.length > 0">
            <ul class="pagination pagination-sm mb-0">
              <li class="page-item" [class.disabled]="list.page === 1">
                <a class="page-link" href="javascript:;" (click)="goToPage(1)">
                  <span aria-hidden="true">&laquo;&laquo;</span>
                </a>
              </li>
              <li class="page-item" [class.disabled]="list.page === 1">
                <a class="page-link" href="javascript:;" (click)="goToPage(list.page - 1)">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              <ng-container *ngFor="let page of visiblePageNumbers">
                <li class="page-item disabled" *ngIf="page < 0">
                  <span class="page-link">...</span>
                </li>
                <li class="page-item" *ngIf="page > 0" [class.active]="list.page === page">
                  <a class="page-link" href="javascript:;" (click)="goToPage(page)">{{ page }}</a>
                </li>
              </ng-container>
              <li class="page-item" [class.disabled]="list.page === maxPageCount">
                <a class="page-link" href="javascript:;" (click)="goToPage(list.page + 1)">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
              <li class="page-item" [class.disabled]="list.page === maxPageCount">
                <a class="page-link" href="javascript:;" (click)="goToPage(maxPageCount)">
                  <span aria-hidden="true">&raquo;&raquo;</span>
                </a>
              </li>
            </ul>
          </nav>
          <div class="ms-3 d-flex align-items-center" *ngIf="maxPageCount > 1">
            <span class="me-2">跳至</span>
            <input
              type="number"
              class="form-control form-control-sm"
              style="width: 60px;"
              min="1"
              [max]="maxPageCount"
              [(ngModel)]="inputPageNumber"
              (change)="onPageInputChange($event)"
              (keyup)="onPageInputKeyUp($event)"
            />
            <span class="ms-2">页</span>
            <button class="btn btn-sm btn-outline-primary ms-2" (click)="goToPage(inputPageNumber)">确定</button>
          </div>
        </div>
      </div>
    </div>
    <div *ngIf="adManagement.items.length === 0" class="text-center">
      <p>暂无数据</p>
    </div>
  </div>
</div>
<!-- 新建/编辑广告管理模态框 -->
<div class="modal fade" [class.show]="isModalOpen" [class.d-block]="isModalOpen" tabindex="-1" role="dialog" aria-modal="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{{ isEditMode ? '编辑地址管理' : '新建地址管理' }}</h5>
        <button type="button" class="btn-close" (click)="closeModal()" aria-label="关闭"></button>
      </div>
      <div class="modal-body">
        <form [formGroup]="createADManagementForm">
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="adManagementUser" class="form-label">用户<span class="text-danger">*</span></label>
              <input type="text" class="form-control" id="adManagementUser" formControlName="adManagementUser">
              <div *ngIf="createADManagementForm.get('adManagementUser').invalid && (createADManagementForm.get('adManagementUser').dirty || createADManagementForm.get('adManagementUser').touched)" class="text-danger">
                <small *ngIf="createADManagementForm.get('adManagementUser').errors?.required">用户不能为空</small>
                <small *ngIf="createADManagementForm.get('adManagementUser').errors?.maxlength">用户不能超过100个字符</small>
              </div>
            </div>
            <div class="col-md-6">
              <label for="adManagementPerson" class="form-label">联系人<span class="text-danger">*</span></label>
              <input type="text" class="form-control" id="adManagementPerson" formControlName="adManagementPerson">
              <div *ngIf="createADManagementForm.get('adManagementPerson').invalid && (createADManagementForm.get('adManagementPerson').dirty || createADManagementForm.get('adManagementPerson').touched)" class="text-danger">
                <small *ngIf="createADManagementForm.get('adManagementPerson').errors?.required">联系人不能为空</small>
                <small *ngIf="createADManagementForm.get('adManagementPerson').errors?.maxlength">联系人不能超过50个字符</small>
              </div>
            </div>
          </div>
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="adManagementPhone" class="form-label">联系电话<span class="text-danger">*</span></label>
              <input type="text" class="form-control" id="adManagementPhone" formControlName="adManagementPhone">
              <div *ngIf="createADManagementForm.get('adManagementPhone').invalid && (createADManagementForm.get('adManagementPhone').dirty || createADManagementForm.get('adManagementPhone').touched)" class="text-danger">
                <small *ngIf="createADManagementForm.get('adManagementPhone').errors?.required">联系电话不能为空</small>
                <small *ngIf="createADManagementForm.get('adManagementPhone').errors?.maxlength">联系电话不能超过20个字符</small>
              </div>
            </div>
            <div class="col-md-6">
              <label for="province" class="form-label">省份</label>
              <input type="text" class="form-control" id="province" formControlName="province">
            </div>
          </div>
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="adManagementCity" class="form-label">城市<span class="text-danger">*</span></label>
              <input type="text" class="form-control" id="adManagementCity" formControlName="adManagementCity">
              <div *ngIf="createADManagementForm.get('adManagementCity').invalid && (createADManagementForm.get('adManagementCity').dirty || createADManagementForm.get('adManagementCity').touched)" class="text-danger">
                <small *ngIf="createADManagementForm.get('adManagementCity').errors?.required">城市不能为空</small>
                <small *ngIf="createADManagementForm.get('adManagementCity').errors?.maxlength">城市不能超过50个字符</small>
              </div>
            </div>
            <div class="col-md-6">
              <label for="adManagementDistrict" class="form-label">区县</label>
              <input type="text" class="form-control" id="adManagementDistrict" formControlName="adManagementDistrict">
            </div>
          </div>
          <div class="row mb-3">
            <div class="col-md-12">
              <label for="detailedAddress" class="form-label">详细地址<span class="text-danger">*</span></label>
              <textarea class="form-control" id="detailedAddress" rows="3" formControlName="detailedAddress"></textarea>
              <div *ngIf="createADManagementForm.get('detailedAddress').invalid && (createADManagementForm.get('detailedAddress').dirty || createADManagementForm.get('detailedAddress').touched)" class="text-danger">
                <small *ngIf="createADManagementForm.get('detailedAddress').errors?.required">详细地址不能为空</small>
                <small *ngIf="createADManagementForm.get('detailedAddress').errors?.maxlength">详细地址不能超过200个字符</small>
              </div>
            </div>
          </div>
          <div class="row mb-3">
            <div class="col-md-4">
              <label class="form-label">默认地址</label>
              <div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" id="defaultAddressYes" value="是" formControlName="defaultAddress">
                  <label class="form-check-label" for="defaultAddressYes">是</label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" id="defaultAddressNo" value="否" formControlName="defaultAddress">
                  <label class="form-check-label" for="defaultAddressNo">否</label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" id="defaultAddressInitial" value="初始" formControlName="defaultAddress">
                  <label class="form-check-label" for="defaultAddressInitial">初始</label>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <label class="form-label">是否可用</label>
              <div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" id="availableYes" value="是" formControlName="available">
                  <label class="form-check-label" for="availableYes">是</label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" id="availableNo" value="否" formControlName="available">
                  <label class="form-check-label" for="availableNo">否</label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" id="availableInitial" value="初始" formControlName="available">
                  <label class="form-check-label" for="availableInitial">初始</label>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <label for="detailedAddressType" class="form-label">地址类型</label>
              <input type="text" class="form-control" id="detailedAddressType" formControlName="detailedAddressType">
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="closeModal()">取消</button>
        <button type="button" class="btn btn-primary" [disabled]="isSaving" (click)="save()">保存</button>
      </div>
    </div>
  </div>
</div> 